<template>
  <div class="login-bg">
    <div class="login-container">
      <div class="login-top" @click="gojuanpao">
        <img src="@/assets/images/logo.png" style="width:150px;display:inline-block">
        <div class="login-homepage"><svg-icon icon-class="zhuye" style="font-size:115%"/><span style="display:inline-block;padding:0 5px">官网首页</span></div>
      </div>
      <div class="panel-container">
        <login-panel v-if="isLogin" @Verify="Verify" @register="isLogin = false; isRegister = true"/>
        <transition name="el-fade-in-linear">
          <verify-slide v-if="isVerify" @login="login"/>
        </transition>
      </div>
      <div>
        <register-panel v-if="isRegister" @login="isLogin = true; isRegister = false"/>
      </div>
    </div>
  </div>
</template>

<script>
import { LoginPanel, VerifySlide, RegisterPanel } from './components'

export default {
  name: 'login',
  components: {
    LoginPanel,
    VerifySlide,
    RegisterPanel
  },
  data() {
    return {
      isLogin: true,
      isVerify: false,
      isRegister: false,
      loginForm: {}
    }
  },
  created(){
    console.log(process.env)
  },
  methods: {
    Verify(loginForm){
      this.loginForm = loginForm;
      this.isVerify = true;
    },
    gojuanpao(){
      location.href = 'https://www.juanpao.com'
    },
    login(){
      const loading = this.$loading({
        lock: true,
        text: '登录中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)'
      });
      this.$store.dispatch('user/login',this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || '/' })
        loading.close()
      }).catch(() => {
        this.isVerify = false
        loading.close();
      })

      // this.$store.dispatch('user/loginTest',this.loginForm);
      // this.$router.push({ path: this.redirect || '/' })
      // loading.close()

    },
    test() {
      console.log('OK!')
    }
  }
}
</script>

<style lang="css" scoped>
.login-bg{
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.6) url('../../assets/images/loginbg_new.jpg') no-repeat center center;
}
.login-container{
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.63);
}
.login-top{
  padding:40px 45px;
}
.login-homepage{
  display: inline-block;
  height: 34px;
  width: 113px;
  color: #bcbcbc;
  float: right;
  border: 1px solid #bcbcbc;
  border-radius: 17px;
  text-align: center;
  line-height: 34px;
  font-size: 14px;
  cursor: pointer;
}
.login-homepage:hover{
  border-color: #fff;
}
.panel-container{
  margin: 0 auto;
  margin-top: 100px;
}
</style>
